<template>
    <van-button @click="$router.go(-1)" type="primary">退出</van-button>
    <div>
        <div class="dmbj">
            <van-button type="primary" @click="playOne()"> 播放 </van-button>
            <span
                >{{ name }}
                <input type="range" min="0" max="100" v-model="progress" @change="updateAudioProgress" />
                <span class="progress_span">{{ currentTime1 }}===={{ duration1 }}</span>
            </span>
            <audio ref="audio1" :src="data[index]"></audio>
            <van-button type="primary" @click="pauseOne()"> 暂停 </van-button>
        </div>
        <div class="switchover">
            <div class="cut">
                <van-button type="primary" @click="next()">下一部</van-button>
                <div class="num">
                    <van-button type="primary" @click="playIndex(0)">七星鲁王宫</van-button>
                    <van-button type="primary" @click="playIndex(1)">秦岭神树</van-button>
                    <van-button type="primary" @click="playIndex(2)">云顶天宫</van-button>
                </div>
                <div class="num_a">
                    <van-button type="primary" @click="playIndex(3)">蛇沼鬼城</van-button>
                    <van-button type="primary" @click="playIndex(4)">谜海归巢</van-button>
                    <van-button type="primary" @click="playIndex(5)">阴山古楼</van-button>
                </div>
                <div class="num_b">
                    <van-button type="primary" @click="playIndex(6)">邛笼石影</van-button>
                    <van-button type="primary" @click="playIndex(7)">大结局上</van-button>
                    <van-button type="primary" @click="playIndex(8)">大结局下</van-button>
                </div>
            </div>
        </div>
        <div class="btn">
            <van-button @click="stopAll()" class="stop" type="danger">清空所有进度</van-button>
            <div class="outime">
                <input style="height: 38px" placeholder="请输入要定时的分钟数" v-model="timeInSeconds" />
                <van-button @click="setTimer(timeInSeconds)" class="outTime" type="success">定时关闭</van-button>
            </div>
            <div class="ds">
                <p>
                    <img src="../assets/images/VX.jpg" alt="" />
                    <img src="../assets/images/zfb.jpg" alt="" />
                </p>
                <p class="qds">欢迎老板赏杯水支持一下</p>
                <div class="bwl">
                    <textarea class="note" placeholder="输入要保存的进度" v-model="content"></textarea>
                    <button @click="saveNote">点击保存</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
const timeInSeconds = ref(); //定时
const audio1 = ref(null); //音频
const content = ref(localStorage.getItem('note') || '上次进度:'); //备忘录
const progress = ref(0); //进度条
const name = ref('《盗墓笔记1之七星鲁王宫》'); //默认渲染名称
let index = ref(0);
const currentTime1 = ref(0); // 音频1的当前时间
const duration1 = ref(0); //音频1的总时长
const updateTime1 = () => {
    if (audio1.value) {
        currentTime1.value = formatTime(Math.floor(audio1.value.currentTime));
        duration1.value = formatTime(Math.floor(audio1.value.duration));
    }
};
setInterval(updateTime1, 1000); //每一秒执行一次
const playIndex = num => {
    // index.value = num;
    index.value += num;
    if (index.value >= 9) {
        index.value = 0;
    }
    switch (index.value) {
        case 0:
            name.value = '《盗墓笔记1之七星鲁王宫》';
            break;
        case 1:
            name.value = '《盗墓笔记2之秦岭神树》';
            break;
        case 2:
            name.value = '《盗墓笔记3之云顶天宫》';
            break;
        case 3:
            name.value = '《盗墓笔记4之蛇沼鬼城》';
            break;
        case 4:
            name.value = '《盗墓笔记5之谜海归巢》';
            break;
        case 5:
            name.value = '《盗墓笔记6之阴山古楼》';
            break;
        case 6:
            name.value = '《盗墓笔记7之邛笼石影》';
            break;
        case 7:
            name.value = '《盗墓笔记8之大结局上》';
            break;
        case 8:
            name.value = '《盗墓笔记8之大结局下》';
            break;
    }
};
function saveNote() {
    localStorage.setItem('note', content.value);
    alert('已保存！');
}
const data = [
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记1-七星鲁王宫.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记2-秦岭神树.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记3-云顶天宫.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记4-蛇沼鬼城.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记5-谜海归巢.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记6-阴山古楼.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记7-邛笼石影.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记8-大结局上.mp3',
    'http://yinche.work:7777/audio/audioBook/daomubiji/盗墓笔记8-大结局下.mp3',
];
//播放1
const playOne = () => {
    audio1.value.play();
};
//暂停1
const pauseOne = () => {
    audio1.value.pause();
};
// 初始化1
const updateAudioProgress = () => {
    const audioOne = audio1.value;
    if (!audioOne) return;
    progress.value = (audioOne.currentTime / audioOne.duration) * 100;
};
// 进度条控制1
watch(progress, newVal => {
    const audioOne = audio1.value;
    if (!audioOne) return;
    audioOne.currentTime = (audioOne.duration / 100) * newVal;
});
//计算公式
const formatTime = timeInSeconds => {
    let hours = Math.floor(timeInSeconds / 3600);
    let minutes = Math.floor((timeInSeconds % 3600) / 60);
    let seconds = Math.floor(timeInSeconds % 60);
    if (hours < 10) {
        hours = '0' + hours;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    return `${hours}:${minutes}:${seconds}`;
};
//定时播放功能 60s
function setTimer(timeInSeconds) {
    alert('定时成功');
    setTimeout(() => {
        stopAll();
    }, timeInSeconds * 60000);
}
function stopAll() {
    audio1.value.currentTime = 0;
    audio1.value.pause();
}
const next = () => {
    //下一集
    index.value += 1;
    if (index.value >= 9) {
        index.value = 0;
    }
    switch (index.value) {
        case 0:
            name.value = '《盗墓笔记1之七星鲁王宫》';
            break;
        case 1:
            name.value = '《盗墓笔记2之秦岭神树》';
            break;
        case 2:
            name.value = '《盗墓笔记3之云顶天宫》';
            break;
        case 3:
            name.value = '《盗墓笔记4之蛇沼鬼城》';
            break;
        case 4:
            name.value = '《盗墓笔记5之谜海归巢》';
            break;
        case 5:
            name.value = '《盗墓笔记6之阴山古楼》';
            break;
        case 6:
            name.value = '《盗墓笔记7之邛笼石影》';
            break;
        case 7:
            name.value = '《盗墓笔记8之大结局上》';
            break;
        case 8:
            name.value = '《盗墓笔记8之大结局下》';
            break;
    }
};
</script>

<style lang="less" scoped>
.switchover {
    width: 100%;
    height: 240px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    .num,
    .num_a,
    .num_b {
        margin-top: 10px;
        margin-left: 30px;
        display: flex;
        justify-content: space-between;
        width: 80%;
        height: 60px;
    }
}
.dmbj {
    margin: 20px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
        width: 100%;
    }
    .progress_span {
        margin-left: 55px;
    }
}
.btn {
    margin-top: 0.3rem;
    .stop {
        width: 100%;
    }
    .outime {
        display: flex;
        flex-direction: column;
        input {
            margin-top: 0.2rem;
            width: 100%;
            height: 0.5rem;
        }
        .outTime {
            margin-top: 0.2rem;
        }
    }
}
.bwl {
    display: flex;
    align-items: center;
    .note {
        width: 80%;
        height: 0.5rem;
    }
}
.ds {
    img {
        margin-top: 0.2rem;
        padding: 0.2rem;
        width: 3rem;
        height: 3rem;
    }
    .qds {
        text-align: center;
        font-size: 0.4rem;
        color: rgb(242, 21, 21);
    }
}
</style>
